@import '~antd/es/style/themes/default.less';

.live-player-warp {
  display: flex;

  .live-player-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    .player-screen-tool {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;

      .ant-radio-button-wrapper {
        height: auto;
        padding: 4px 20px;
      }
    }

    .player-body {
      flex: 1;

      .player-screen {
        position: relative;
        display: grid;
        box-sizing: border-box;

        &.screen-1 {
          grid-template-columns: 1fr;
        }

        &.screen-4 {
          grid-template-rows: 1fr 1fr;
          grid-template-columns: 1fr 1fr;
        }

        &.screen-9 {
          grid-template-rows: 1fr 1fr 1fr;
          grid-template-columns: 1fr 1fr 1fr;
        }

        &.screen-4,
        &.screen-9 {
          grid-gap: 12px;
        }

        .active {
          border: 2px solid red;
        }

        .full-screen {
          border: 1px solid #fff;
        }

        .player-screen-item {
          position: relative;

          .media-btn-refresh {
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 2;
            padding: 2px 4px;
            font-size: 12px;
            background-color: #f0f0f0;
            border-radius: 2px;
            cursor: pointer;

            &:hover {
              background-color: #d9d9d9;
            }

            &:active {
              background-color: #bfbfbf;
            }
          }
        }
      }
    }
  }
}
